<template>
  <footer>
    <div class="footer-main">
      <div class="footer-main-top">
        <div class="footer-nav-item">
          <dl>
            <dt>购物指南</dt>
            <dd>购物流程</dd>
            <dd>会员介绍</dd>
            <dd>生活旅行/团购</dd>
            <dd>常见问题</dd>
            <dd>购物指南</dd>
          </dl>
        </div>
        <div class="footer-nav-item">
          <dl>
            <dt>配送方式</dt>
            <dd>上门自提</dd>
            <dd>211限时达</dd>
            <dd>配送服务查询</dd>
            <dd>配送费收取标准</dd>
            <dd>海外配送</dd>
          </dl>
        </div>
        <div class="footer-nav-item">
          <dl>
            <dt>支付方式</dt>
            <dd>货到付款</dd>
            <dd>在线支付</dd>
            <dd>分期付款</dd>
            <dd>邮局汇款</dd>
            <dd>公司转账</dd>
          </dl>
        </div>
        <div class="footer-nav-item">
          <dl>
            <dt>售后服务</dt>
            <dd>售后政策</dd>
            <dd>价格保护</dd>
            <dd>退款说明</dd>
            <dd>返修/退换货</dd>
            <dd>取消订单</dd>
          </dl>
        </div>
        <div class="footer-nav-item">
          <dl>
            <dt>特色服务</dt>
            <dd>夺宝岛</dd>
            <dd>DIY装机</dd>
            <dd>延保服务</dd>
            <dd>尚品汇E卡</dd>
            <dd>尚品汇通信</dd>
          </dl>
        </div>
        <div class="footer-nav-item">
          <p>帮助中心</p>
          <img src="./wx_cz.jpg" alt="wx_ewm" />
        </div>
      </div>
      <div class="footer-main-bottom">
        <ul>
          <li><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;">联系我们</a></li>
          <li><a href="javascript:;">友情链接</a></li>
          <li><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;">营销中心</a></li>
          <li><a href="javascript:;">商家入驻</a></li>
          <li><a href="javascript:;">营销中心</a></li>
          <li><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;">营销中心</a></li>
          <li><a href="javascript:;">友情链接</a></li>
        </ul>
        <span>地址：北京市昌平区宏福科技园综合楼6层 </span>

        <span>京ICP备19006430号</span>
      </div>
    </div>
  </footer>
</template>
<script>
export default {
  name: "Footer",
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
//css
footer {
  width: 100%;
  min-width: 1200px;
  background-color: #eaeaea;
}
.footer-main {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
.footer-main-top {
  .flex();
  .footer-nav-item {
    dt,
    p {
      font: bolder 14px "Microsoft YaHei";
    }
    dd {
      margin-top: 3px;
    }
  }
}
.footer-main-bottom {
  .flex();
  width: 1200px;
  height: 60px;
  align-items: center;
  flex-direction: column;
  border-top: 1px solid #e4e1e1;
  ul {
    display: flex;
    li + li {
      border-left: 1px solid black;
      padding-left: 10px;
      margin-left: 10px;
    }
  }
}
</style>